/**
 * 应聘登记表-声明
 */
import React from 'react';
import { Row, Checkbox } from 'antd';
// import moment from 'moment';

const Declare = React.forwardRef(({ title, file, value, onChange, onPreview, disabled }, ref) => {
    const realTitle = React.useMemo(() => {
        if (file) {
            const realName = decodeURIComponent(file);
            const start = realName.lastIndexOf('_');
            const end = realName.lastIndexOf('.');
            return realName.substring(start + 1, end);
        }
        return '';
    }, [file]);

    const handlePreview = () => {
        if (onPreview) {
            onPreview();
        }
    };

    window.$handleDeclarePreview = handlePreview;

    const keywordColorful = (str, key) => {
        if (!key) {
            return str;
        }
        const reg = new RegExp(key, 'g');
        const newStr = str.replace(reg, `<a class="declare-preview" onclick="$handleDeclarePreview()">${key}</a>`);
        return newStr;
    };

    const testKey = (str, key) => {
        if (!key) {
            return false;
        }
        const reg = new RegExp(key, 'g');
        return reg.test(str);
    };

    return (
        <div ref={ref}>
            <Row
                type="flex"
                style={{ flexWrap: 'nowrap', paddingLeft: 12, marginBottom: 24, alignItems: 'flex-start' }}
            >
                <Checkbox checked={value} onChange={e => onChange(e.target.checked)} disabled={disabled} />
                <div
                    style={{
                        display: 'inline-block',
                        marginLeft: 10,
                        whiteSpace: 'pre-wrap',
                        wordBreak: 'break-all',
                        fontSize: '14px',
                        color: 'rgba(0,0,0,0.65)',
                        fontWeight: '400'
                    }}
                    // eslint-disable-next-line react/no-danger
                    dangerouslySetInnerHTML={{
                        __html: keywordColorful(title, realTitle)
                    }}
                />
            </Row>
            {file && !testKey(title, realTitle) && (
                <Row style={{ marginBottom: 8 }}>
                    法律条款：<a onClick={handlePreview}>{realTitle}</a>
                </Row>
            )}

            {/* <Row>应聘日期：{moment().format('YYYY年MM月DD日')}</Row> */}
        </div>
    );
});
Declare.displayName = 'Declare';

export default Declare;
